<template>
  <div class="videoBox">
    <img src="../../assets/imgs/playBtn.png" class="playBtn" @click="playVideo" v-show="false">
    <video id="video" class="video" src="../../assets/video/xuanchuanpian20230109.mp4" type="video/mp4"
           poster="false.png" controls
           @timeupdate="timeupdate">
      <p>你的浏览器不支持video标签.</p>
    </video>
    <!--    <van-popup v-model="obtain" :class="Resize.isView==1?'obtainBg':'hobtainBg'" id="obtainBg">-->
    <!--      {{ Resize.isView }}-->
    <!--&lt;!&ndash;      <img id="propImg" src="../../assets/image/obtainBg.png" alt=""/>&ndash;&gt;-->
    <!--      <img style="width: 100%" src="@/assets/image/drawBg.png">-->
    <!--      <div class="drawSub">-->
    <!--        <img @click="goDraw" src="../../assets/image/drawSub.png" alt="">-->
    <!--      </div>-->
    <!--      <div class="close_icon" style="margin-top: 10px;text-align: center" @click="dialogClos">-->
    <!--        &lt;!&ndash;        <van-icon size="1rem" name="close" />&ndash;&gt;-->
    <!--        <img src="../../assets/image/returnGo.png">-->
    <!--      </div>-->
    <!--      &lt;!&ndash;      <div class="drawSub">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <img @click="goDraw" src="../../assets/image/drawSub.png" alt="">&ndash;&gt;-->
    <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
    <!--    </van-popup>-->

    <div class="prizeResultModal" v-show="obtain">

      <div class="drawSub">
        <img src="@/assets/image/drawBg2.png" class="tips">
        <img @click="goDraw" src="../../assets/image/drawSub.png" alt="" class="btn">
        <div class="close_icon" @click="dialogClos">
          <!--        <van-icon size="1rem" name="close" />-->
          <img src="../../assets/image/returnGo.png">
        </div>
      </div>

    </div>

  </div>
</template>
<script>
import {getUploadListUrl, getUploadLisVideotUrl, getUserCkeckUrl} from "@/api/list";
import {myConstants} from "@/utils/activitytime";

var last = 0;
export default {
  name: "videoList",
  data() {
    return {
      obtain: false,
      videoPlayer: false,
      audioPauseStatus: false,
      Resize: {
        isView: 1
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      let audio = document.getElementById("audioId");
      this.audioPlayStatus = audio.paused;
      if (!audio.paused) {
        audio.pause();
      }
      this.playVideo();
      window.addEventListener("resize", this.renderResize, false);
    });
  },
  created() {
  },
  beforeDestroy() {
    //如果进入前背景音乐是开启的,则离开前将他打开
    if (!this.audioPlayStatus) {
      document.getElementById("audioId").play();
    }
  },
  methods: {
    playVideo() {
      let video = document.getElementById("video");
      if (video) {
        video.play();
      }
    },
    dialogClos() {
      this.clickAudio();
      let _this = this;
      setTimeout(function () {
        _this.uploaSuccdShow = false;
        _this.$router.replace({path: "/home"});
      }, myConstants.delay)

    },
    goDraw() {
      this.clickAudio();
      this.$router.replace({path: "/LuckyDraw", query: {type: 1}});
    },
    renderResize() {
      this.$nextTick(() => {
        // 判断横竖屏
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;
        let img = document.getElementById("propImg");
        if (width > height) {
          img.style.transform = "rotate(0deg)";
          this.Resize.isView = 2;
        } else {
          img.style.transform = "rotate(270deg)";
          this.Resize.isView = 1;
        }
      });
      // 做页面适配
      // 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
    },
    timeupdate(e) {
      this.videoPlayer = true;
      var current = e.target.currentTime;
      if (current - last > 2) {
        e.target.currentTime = last;
      } else {
        last = current;
        if (current === e.target.duration) {
          let params = {
            type: 4
          };
          getUserCkeckUrl(params).then(res => {
            if (res.data.length === 0) {
              let obj = new FormData();
              obj.append("type", 4);
              getUploadListUrl(obj).then(res => {
                this.obtain = true;
              });
            }
          });
        }
      }

    }
  }
};
</script>

<style scoped lang="scss">



//
.videoBox {
  width: 100%;
  height: 100%;

  video {
    width: 100%;
    height: 100%;
  }

  .obtainBg {
    width: 100%;
    height: 100%;
    background: black;
    border-radius: 20%;
    z-index: 999999999999 !important;

    img {
      width: 100%;
      height: 100%;
      transform: rotate(270deg);
    }
  }

  .hobtainBg {
    width: 100px;
    height: 100px;
    background: black;
    border-radius: 20%;
    z-index: 999999999999 !important;

    img {
      width: 100%;
      height: 100%;
      transform: rotate(270deg);
    }
  }

  //.playBtn {
  //  z-index: 1000;
  //  position: absolute;
  //  top: 0;
  //  left: 0;
  //  width: 30vw;
  //  height: 30vh;
  //}
  .playBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    //display: flex;
    justify-content: center;
    width: 30vw;

  }

  .prizeResultModal {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    //background: black !important;
    //width: 250px;
    //height: 250px;
    //padding: 10px;
    //background-image: url("@/assets/image/drawBg.png");
    //background-size: 100% 100%;
    //background-repeat: no-repeat;
    //border-radius: 21%;

    .drawSub {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%);
      display: flex;
      justify-content: center;

      .tips {
        width: 70vw;
        height: 70vw;
        margin: 0 auto;
      }

      .btn {
        width: 50%;
        position: absolute;
        bottom: 12%;
      }

      .close_icon {
        position: absolute;
        top: calc(30% + 55vw);
        width: 15vw;
        height: 15vw;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

}
</style>
